<template>
  <div class="container">
    <div class="main_box"></div>
    <div class="header">
      <div class="time">
        {{ date }}
      </div>
      <div class="content">
        <div :class="route.name === 'about' ? 'zsfx' : 'zsfx2'"></div>
        <div class="yyfx" @click="toZs"></div>
      </div>
    </div>
    <div class="body_box">
      <div class="left">
        <div class="state_num">
          <div class="sjzt head_title"></div>
          <NewCount
            id="sjzt"
            text2="新增总数"
            text3="个"
            :data="infoData1"
            v-if="flag"
          ></NewCount>
        </div>
        <div class="num_ans">
          <div class="khsl head_title"></div>
          <NewCount
            :data="infoData2"
            v-if="flag"
            id="khsl"
            text1="3"
            text2="企业总数"
            text3="家"
          ></NewCount>
        </div>
        <div class="fee">
          <div class="khqf head_title"></div>
          <NewCount
            :data="infoData3"
            v-if="flag"
            id="khqf"
            text1="200个"
            text2="总计"
            text3="个"
          ></NewCount>
        </div>
      </div>
      <div class="center">
        <div class="count">
          <div class="kjslzs head_title"></div>

          <NumTread v-if="flag" :data="infoData4" id="numTread"></NumTread>
        </div>
        <div class="yq_num">
          <div class="yqkhsl head_title"></div>
          <StuffRank
            :infoData="infoData5"
            v-if="flag"
            id="stuffRank"
          ></StuffRank>
        </div>
      </div>
      <div class="right">
        <div class="rental">
          <div class="yqczqk head_title"></div>
          <ScrollTable
            :lables="[
              '客户名称',
              '注册资金(万元)',
              '注册地址',
              '双落地时间',
              '项目类型',
            ]"
            v-if="flag"
            :tableData="tableData"
          >
          </ScrollTable>
        </div>
        <div class="lease">
          <div class="tztj2 head_title"></div>
          <StuffRank v-if="flag" :data="infoData7" id="tztj2"></StuffRank>
        </div>

        <div class="rental_info">
          <div class="tzqyxx head_title"></div>
          <Tax v-if="flag" :data="infoData8"></Tax>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import autofit from "autofit.js";
import { ref, onMounted, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";

import ScrollTable from "../components/charts/scrollTable.vue";
import NumTread from "../components/charts/numTread.vue";
import StuffRank from "../components/charts/stuffRank.vue";
import Tax from "../components/charts/tax.vue";
import { getZsInfo, getSldList, getOverview2 } from "@/api";

import NewCount from "../components/charts/newCount.vue";

import dayjs from "dayjs";

const router = useRouter();
const route = useRoute();
const infoData1 = ref();
const infoData2 = ref();

const infoData3 = ref();
const infoData4 = ref();
const infoData5 = ref();
const tableData = ref([]);
const infoData7 = ref();
const infoData8 = ref([]);

const flag = ref(false);
const colors = [
  "rgba(75, 202, 46, 0.6)",
  "rgba(25, 192, 255, 0.6)",
  "rgba(210, 180, 57, 0.6)",
  "rgba(194, 115, 255, 0.4)",
  "rgba(162, 187, 255, 0.6)",
];

const date = ref();
onMounted(() => {
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "body",
    resize: true,
  });
  getZsInfo({ date: 2024 }).then((res, index) => {
    infoData1.value = [
      {
        value: res.data.registrationStatistics.corpTotal,
        name: "双落地",
        itemStyle: { color: colors[0] },
      },
      {
        value: res.data.registrationStatistics.oppoTotal,
        name: "线索",
        itemStyle: { color: colors[1] },
      },
    ];
    infoData2.value = res.data.enterpriseCategory.sldEnterpriseCategory.map(
      (item, index) => {
        return {
          value: item.count,
          name: item.enterpriseType,
          itemStyle: { color: colors[index] },
        };
      }
    );
    infoData3.value = [
      {
        value: res.data.registeredCapital.sldWZCZJ,
        name: "双落地外资注册资金",
        itemStyle: { color: colors[0] },
      },
      {
        value: res.data.registeredCapital.sldWZRMBZCZJ,
        name: "双落地外资人民币",
        itemStyle: { color: colors[1] },
      },
      {
        value: res.data.registeredCapital.sldNZCZJ,
        name: "双落地内资人民币",
        itemStyle: { color: colors[2] },
      },
    ];
    infoData4.value = {
      sld: res.data.registrationStatistics.corpMonthlyStatistics.map(
        (item) => item.count
      ),
      sx: res.data.registrationStatistics.oppoMonthlyStatistics.map(
        (item) => item.count
      ),
    };
    infoData5.value = {
      sldRankings: res.data.ranking.sldRankings.map((item) => {
        return {
          value: item.count,
          name: item.realName,
        };
      }),
      xsRankings: res.data.ranking.xsRankings.map((item) => {
        return {
          value: item.count,
          name: item.realName,
        };
      }),
    };
    infoData7.value = res.data.registeredCapital.sldRegisteredCapital
      .sort((a, b) => a.sortOrder - b.sortOrder)
      .map((item, index) => {
        return {
          value: item.companyCount,
          name: item.zczjRange,
        };
      });
    flag.value = true;
  });
  getSldList({
    typeId: -1,
    doubleLandingTimeEnd: 1,
    order: 1,
    page: 1,
    rows: 10,
    type: "rzqy",
    isVirtual: 1,
  }).then((res) => {
    tableData.value = res.data.list
      .map((item) => {
        return {
          name: item.name,
          zczj: item.zczj,
          zcdz: item.zcdz,
          enterpriseTypeOneName: item.enterpriseTypeOneName,
          doubleLandTime: item.doubleLandTime,
        };
      })
      .sort((a, b) => {
        return Date.parse(a.doubleLandTime) - Date.parse(b.doubleLandTime);
      });
  });
  getOverview2({
    corpId: -1,
  }).then((res) => {
    infoData8.value = res.data.sourceNum
      .map((it) => {
        return {
          name: it.name,
          value: it.num,
        };
      })
      .filter((item) => item.name !== "其他")
      .sort((a, b) => {
        return a.value - b.value;
      });
    console.log(infoData8.value, 22);
  });
  setInterval(() => {
    date.value = dayjs().format("YYYY.MM.DD 星期d HH:mm:ss");
  }, 1000);
});
const toZs = () => {
  console.log(111);
  router.push("/");
};
</script>

<style scoped>
.container {
  padding: 0;
  position: relative;
  width: 100%;
  height: 1446px;
  mix-blend-mode: multiply;

  background: url("../img/bgc.jpg") no-repeat;
  background-size: cover;
}

.main_box {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.4;

  background: linear-gradient(
    180deg,
    #029edb 0%,
    #009dde 15%,
    #00587c 63%,
    #00557a 100%
  );
}

.header {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 112px;
  opacity: 1;
  background: url("../img/header.png") no-repeat;
  background-size: cover;
}

.content {
  position: absolute;
  width: 1120px;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
}

.content div {
  width: 195px;
  height: 47.77px;
}

.time {
  width: 400px;
  height: 50px;
  display: flex;
  box-sizing: border-box;
  padding-left: 50px;
  padding-top: 20px;
  color: #fff;
}

.yyfx {
  background: url("../img/yyfx2.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}

.zsfx {
  background: url("../img/zsfx.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}

.zsfx2 {
  background: url("../img/zsfx2.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}

.body_box {
  position: absolute;
  width: 100%;
  height: 67%;
  top: 110px;
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.left {
  width: 25%;
  height: 100%;
  margin-left: 10px;
  box-sizing: border-box;
}

.center {
  margin-left: 5px;
  margin-right: 5px;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}

.right {
  width: 25%;
  height: 100%;
  box-sizing: border-box;
  margin-right: 10px;
}

.count {
  width: 100%;
  height: 55%;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.yq_num {
  width: 100%;
  height: 45%;
  opacity: 1;
  background: rgba(64, 112, 146, 0.26);
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.rental {
  width: 100%;
  height: 317px;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.lease {
  width: 100%;
  height: 317px;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
  margin-top: 5px;
}

.rental_info {
  width: 100%;
  height: 320px;
  opacity: 1;
  margin-top: 5px;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.state_num {
  left: 23px;
  top: 125px;
  width: 100%;
  height: 33%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.num_ans {
  margin-top: 5px;
  width: 100%;
  height: 33%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.fee {
  margin-top: 5px;
  width: 100%;
  height: 33%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.head_title {
  width: 90%;
  height: 35px;

  margin-left: 9px;
  box-sizing: border-box;
}

.sjzt {
  background: url("../img/xzsl.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.khsl {
  background: url("../img/kjxqy.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.khqf {
  background: url("../img/zcztfx.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.yqkhsl {
  height: 70px;

  background: url("../img/ygph.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.kjslzs {
  height: 70px;
  background: url("../img/xzslzs.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.yqczqk {
  height: 42px;
  background: url("../img/zdfwdx.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.tztj2 {
  height: 42px;

  background: url("../img/nzzczj.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.tzqyxx {
  height: 42px;

  background: url("../img/qyss.png") no-repeat;
  background-size: cover;
  background-position: center;
}
</style>
